<template>
    <div class="det-box">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>审批管理</el-breadcrumb-item>
            <el-breadcrumb-item>申请详情</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 数据 -->
        <el-table :data="applyDetail"
            class="el-table-box"
            height="93%"
            style="width: 100%; margin-top:20px;font-weight:700"
            :header-cell-style="{textAlign: 'center'}"
            :cell-style="{ textAlign: 'center' }"
            :row-class-name="tableRowClassName">
            <el-table-column type="index" label="序号"  width="60"></el-table-column>
            <el-table-column prop="staffName" label="申请人姓名" width="100"></el-table-column>
            <el-table-column prop="staffSex" label="性别" width="80"></el-table-column>
            <el-table-column prop="staffAge" label="年龄" width="80"></el-table-column>
            <el-table-column prop="staffTel" label="电话" width="120"></el-table-column>
            <el-table-column prop="applyTitle" label="标题" width="150"></el-table-column>
            <el-table-column prop="applyDetail" label="内容" width="250"></el-table-column>
            <el-table-column prop="applyType" label="类型" width="90"></el-table-column>
            <el-table-column prop="applyState" label="申请状态" width="150"></el-table-column>
            <el-table-column prop="applyTime" label="申请日期" width="170"></el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="230">
                <template slot-scope="scope">
                    <el-button @click="agreeApply(scope.row)" type="success" size="small" style="font-size:15px">同意</el-button>
                    <el-button @click="rejectApply(scope.row)" type="warning" size="small" style="font-size:15px">驳回</el-button>
                </template>
            </el-table-column>           
        </el-table>
        <!-- 驳回弹窗 -->
        <el-dialog
            title="驳回原因"
            :visible.sync="rejectDialogVisible"
            width="30%">
            <el-input v-model="rejectReason" placeholder="请输入驳回原因"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="rejectDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="rejectApplySure()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return{
            applyDetail:[],
            rejectObject:{},
            rejectDialogVisible:false,
            rejectReason:"",
        }
    },
    created(){
        this.getApplyAllInfo();
    },
    methods:{
        getApplyAllInfo(){
            this.$http.get("/approval/getApplyAllInfo").then((res)=>{
                // console.log(res);
                if(res.code === 200){
                    this.applyDetail = res.data;
                }else{
                    this.$message.error("获取审批数据失败!!!");
                }
            }).catch((err)=>{
                this.$message.error("获取报销数据失败!!!");
            });
        },
        tableRowClassName({row, rowIndex}) {
           // console.log(typeof row.stateId);
            if (row.stateId === "2") {
                //通过
                return 'success-row';
            } else if (row.stateId === '3') {
                //驳回
                return 'error-row';
            }
            return '';
        },
        //同意
        agreeApply(row){
            // console.log(row);
            if(row.stateId === '2'){
                return this.$message.warning("已完成审批,当前状态不允许审批!!!");
            }
            this.$http.get("/approval/agreeApply?applyId="+row.applyId).then((res)=>{
                if(res.code === 200 && res.data){
                    this.$message.success("审批成功!!!");
                    this.getApplyAllInfo();
                }else{
                    this.$message.error("审批失败!!!");
                }
            }).catch((err)=>{
                this.$message.error("审批失败!!!");
            });
        },
        rejectApply(row){
            if(row.stateId === '2' || row.stateId === '3'){
                return this.$message.warning("已完成审批,当前状态不允许驳回!!!");
            }
            this.rejectDialogVisible=true;
            this.rejectObject = row;
        },
        //驳回
        rejectApplySure(){    
            if(this.rejectReason === null || this.rejectReason === ""){
                return this.$message.warning("驳回原因不允许为空");
            } 
            this.$confirm('确定驳回改申请? 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let params = "applyId="+this.rejectObject.applyId + "&rejectMemo="+this.rejectReason;
                this.$http.get("/approval/rejectApply?"+params).then((res)=>{
                    if(res.code === 200 && res.data){
                        this.$message.success("驳回成功!!!");
                        this.getApplyAllInfo();
                        this.rejectDialogVisible=false;
                        this.rejectReason="";
                        
                    }else{
                        this.$message.error("驳回失败!!!");
                    }
                }).catch((err)=>{
                    this.$message.error("驳回失败!!!");
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作!!!'
                });          
            });
        }
    }
}
</script>

<style scoped>
.det-box{
    width: 1005;
    height: 100%;
}
.el-table >>> .error-row {
background: rgb(242, 225, 193);
}

.el-table >>> .success-row {
background: #f0f9eb;
}

</style>